<template>
	<view class="content">
		<view class="top">
			<view class="account" @click="show=true">
				{{name}}
			</view>
			<view class="num">
				总消费：{{total}}
			</view>
		</view>
		<view class="day boxs" @click="todetail">
			<view class="left">
				记账{{days}}
			</view>
			<view class="right">
				<view class="image">
					<image :src="src" mode=""></image>
				</view>
				<view class="icon">
					更多
				</view>
			</view>
		</view>
		<view class="zhandan">
			<view class="title" @click="tomore">
				<view class="left">
					账单
				</view>
				<view class="right">
					<u-icon name="arrow-right" size="20"></u-icon>
				</view>
			</view>
			<view class="main">
				<view class="box" v-for="item in dataForm" :key="item._id" @click="tobillDetails(item._id)">
					<view class="left">
						<view class="type">
							<image v-if="item.type=='吃喝'" src="../../static/bookeepingIcon/chihewanle.png" mode="">
							</image>
							<image v-if="item.type=='交通'" src="../../static/bookeepingIcon/bus-alt.png" mode=""></image>
							<image v-if="item.type=='娱乐'" src="../../static/bookeepingIcon/yuleAPP.png" mode=""></image>
							<image v-if="item.type=='酒店'" src="../../static/bookeepingIcon/hotel.png" mode=""></image>
							<image v-if="item.type=='水电'" src="../../static/bookeepingIcon/shuidianjiaofei.png" mode="">
							</image>
							<image v-if="item.type=='房租'" src="../../static/bookeepingIcon/fangzu.png" mode=""></image>
							<image v-if="item.type=='买菜'" src="../../static/bookeepingIcon/huluobu.png" mode=""></image>
							<image v-if="item.type=='购物'" src="../../static/bookeepingIcon/shopping2.png" mode="">
							</image>
							<image v-if="item.type=='门票'" src="../../static/bookeepingIcon/menpiao-copy.png" mode="">
							</image>
						</view>
						<view class="time">
							<view class="text">
								{{item.type}}
							</view>
							<view class="times">
								{{item.time}}
							</view>
						</view>
					</view>
					<view class="right">
						<view class="price">
							{{item.money}}
						</view>
						<view class="paypeople">
							{{item.founder}}付款
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-picker :show="show" :columns="accList" keyName="name" @cancel='close' @confirm='confirm'></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: uni.getStorageSync('userInfo').avatarUrl,
				dataForm: {},
				show: false,
				accList: [],
				total: 0,
				name: '',
				days: "",
			}
		},
		onLoad(e) {
			if (!uni.getStorageSync('userInfo')) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
			// console.log(e);
			let that = this
			if (e.nickName) {
				uni.showModal({
					title: '提示',
					content: `${e.nickName}邀请您加入账本-${e.name}`,
					success: function(res) {
						if (res.confirm) {
							let data = {
								accountId: e.id,
								userId: uni.getStorageSync('userInfo')._id,
							}
							that.$cloudApi.call({
								name: 'adduserId',
								data,
								success: res => {
									uni.showToast({
										icon: 'success',
										title: '加入成功'
									})
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			}
		},
		onShow() {
			this.src = uni.getStorageSync('userInfo').avatarUrl,
				this.getacc()
			let that = this
			wx.checkSession({
				success: function(res) {
					console.log("处于登录态");
				},
				fail: function(res) {
					console.log("需要重新登录");
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			})

		},
		methods: {
			//计算两个时间之间的时间差 多少天时分秒
			intervalTime(startTime, endTime) {
				// var timestamp=new Date().getTime(); //计算当前时间戳
				var timestamp = (Date.parse(new Date())) / 1000; //计算当前时间戳 (毫秒级)
				var date1 = ""; //开始时间
				if (timestamp < startTime) {
					date1 = startTime;
				} else {
					date1 = timestamp; //开始时间
				}
				var date2 = endTime; //结束时间
				// var date3 = date2.getTime() - date1.getTime(); //时间差的毫秒数
				var date3 = (date2 - date1) * 1000; //时间差的毫秒数
				//计算出相差天数
				var days = Math.floor(date3 / (24 * 3600 * 1000));
				if (days < 0) {
					days = days * (-1)
				}

				//计算出小时数
				var leave1 = date3 % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
				var hours = Math.floor(leave1 / (3600 * 1000));
				//计算相差分钟数
				var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
				var minutes = Math.floor(leave2 / (60 * 1000));

				//计算相差秒数
				var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
				var seconds = Math.round(leave3 / 1000);
				console.log(days + "天 " + hours + "小时 ")
				// return   days + "天 " + hours + "小时 " + minutes + " 分钟" + seconds + " 秒"
				return days + "天 "
			},

			tobillDetails(e) {
				uni.navigateTo({
					url: '/pages/billDetails/billDetails?id=' + e
				})
			},
			tomore() {
				uni.navigateTo({
					url: '/pages/index/moreAbill'
				})
			},
			confirm(e) {
				uni.setStorageSync('accId', e.value[0])
				var time1 = new Date(e.value[0].createdTime).getTime() / 1000
				this.days = this.intervalTime(Math.round(new Date() / 1000), time1)
				this.name = e.value[0].name
				this.init()
				this.show = false
			},
			close() {
				this.show = false
			},
			getacc() {
				let data = {
					id: uni.getStorageSync('userInfo')._id
				}
				this.$cloudApi.call({
					name: 'getAccount',
					data,
					success: res => {
						console.log(res);
						this.accList[0] = res.data
						uni.setStorageSync('accID', res.data)
						if (uni.getStorageSync('accId')) {
							this.name = uni.getStorageSync('accId').name
							var time1 = new Date(uni.getStorageSync('accId').createdTime).getTime() / 1000
							this.days = this.intervalTime(Math.round(new Date() / 1000), time1)
						} else {
							this.name = res.data[0].name
							uni.setStorageSync('accId', res.data[0])
							var time1 = new Date(uni.getStorageSync('accId').createdTime).getTime() / 1000
							this.days = this.intervalTime(Math.round(new Date() / 1000), time1)
						}
						this.init()
					}
				});
			},
			todetail() {
				uni.navigateTo({
					url: `/pages/myaccount/accountDetails?id=${uni.getStorageSync('accId')._id}`
				})
			},
			init() {
				let data = {
					id: uni.getStorageSync('accId')._id
				}
				this.$cloudApi.call({
					name: 'getBill',
					data,
					success: res => {
						// console.log(res);
						this.total = res.total
						this.dataForm = res.data
					}
				});

			}
		}
	}
</script>

<style scoped lang="less">
	.content {
		image {
			width: 80rpx;
			height: 80rpx;
		}

		.top {
			background-color: #5DD98F;
			height: 300rpx;
			width: 100%;
			color: #fff;
			font-size: 30rpx;
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.num {
				margin-top: 30rpx;
			}
		}

		.boxs {
			background-color: #fff;
			padding: 25rpx 40rpx;
			font-size: 25rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
		}

		.day {
			padding: 10rpx 40rpx;
			margin-top: 30rpx;

			image {
				border-radius: 50%;
			}

			.right {
				display: flex;
				align-items: center;

				.icon {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					background-color: #E5E5E5;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #666;
					margin-left: 20rpx;
				}
			}


		}

		.zhandan {
			background-color: #fff;
			font-size: 25rpx;
			margin-bottom: 20rpx;

			.title {
				display: flex;
				padding: 25rpx 40rpx;
				justify-content: space-between;
				border-bottom: 1px solid #f1f1f1;
			}

			.main {
				.box {
					padding: 20rpx 40rpx;
					display: flex;
					border-bottom: 1px solid #f1f1f1;
					align-items: center;
					justify-content: space-between;

					.left {
						display: flex;
						align-items: center;

						.time {
							text-align: center;
							margin-left: 10rpx;

							.text {
								margin-bottom: 10rpx;
							}
						}
					}

					.right {
						display: flex;
						align-items: center;
						flex-direction: column;
						justify-content: space-between;

						.price {
							font-weight: bold;
							margin-bottom: 10rpx;
						}
					}
				}
			}
		}
	}
</style>
